<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>终端提示符测试</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1e1e1e;
            color: #d4d4d4;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        h1 {
            color: #007acc;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .test-section {
            background-color: #2d2d30;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .test-section h2 {
            color: #007acc;
            margin-top: 0;
        }
        
        .terminal-demo {
            background-color: #1e1e1e;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            padding: 15px;
            font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
            font-size: 14px;
            line-height: 1.5;
            margin: 15px 0;
        }
        
        .terminal-input-line {
            display: flex;
            align-items: center;
            background-color: #1e1e1e;
            padding: 5px 0;
        }
        
        .terminal-prompt {
            color: #007acc;
            font-weight: normal;
            font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 12px;
            margin-right: 8px;
        }
        
        .terminal-input {
            background: transparent;
            border: none;
            outline: none;
            color: #d4d4d4;
            font-family: inherit;
            font-size: inherit;
            flex: 1;
        }
        
        .test-controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 15px 0;
        }
        
        .test-btn {
            background-color: #007acc;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
        
        .test-btn:hover {
            background-color: #005a9e;
        }
        
        .test-btn:disabled {
            background-color: #424242;
            cursor: not-allowed;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            align-items: center;
            margin: 10px 0;
        }
        
        .input-group input {
            background-color: #3c3c3c;
            border: 1px solid #5c5c5c;
            color: #d4d4d4;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #007acc;
        }
        
        .status {
            background-color: #2d2d30;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
        }
        
        .status.success {
            border-color: #4caf50;
            color: #4caf50;
        }
        
        .status.error {
            border-color: #f44336;
            color: #f44336;
        }
        
        .status.info {
            border-color: #2196f3;
            color: #2196f3;
        }
        
        .example-paths {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin: 15px 0;
        }
        
        .example-path {
            background-color: #3c3c3c;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
            font-family: monospace;
            font-size: 12px;
        }
        
        .example-path:hover {
            background-color: #4c4c4c;
        }
        
        .code-block {
            background-color: #1e1e1e;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            padding: 15px;
            font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
            font-size: 12px;
            line-height: 1.4;
            overflow-x: auto;
            margin: 15px 0;
        }
        
        .highlight {
            color: #007acc;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>终端提示符测试</h1>
        
        <div class="test-section">
            <h2>VSCode风格终端提示符演示</h2>
            <p>这个演示展示了VSCode风格的终端提示符，应该显示当前路径加 <code class="highlight">></code> 号。</p>
            
            <div class="terminal-demo">
                <div>欢迎使用 Blue Code 终端</div>
                <div>当前目录: C:\Users\Username\Documents</div>
                <div>输入 "help" 查看可用命令，或直接输入系统命令</div>
                <div class="terminal-input-line">
                    <span class="terminal-prompt" id="demo-prompt">C:\Users\Username\Documents> </span>
                    <input type="text" class="terminal-input" placeholder="输入命令..." id="demo-input">
                </div>
            </div>
            
            <div class="test-controls">
                <button class="test-btn" onclick="testCurrentPrompt()">测试当前提示符</button>
                <button class="test-btn" onclick="updateDemoPrompt()">更新演示提示符</button>
                <button class="test-btn" onclick="resetDemoPrompt()">重置提示符</button>
            </div>
        </div>
        
        <div class="test-section">
            <h2>路径切换测试</h2>
            <p>测试不同路径下的提示符显示效果：</p>
            
            <div class="example-paths">
                <div class="example-path" onclick="setDemoPath('C:\\')">C:\</div>
                <div class="example-path" onclick="setDemoPath('C:\\Users')">C:\Users</div>
                <div class="example-path" onclick="setDemoPath('C:\\Users\\Username')">C:\Users\Username</div>
                <div class="example-path" onclick="setDemoPath('C:\\Users\\Username\\Documents')">C:\Users\Username\Documents</div>
                <div class="example-path" onclick="setDemoPath('C:\\Users\\Username\\Desktop')">C:\Users\Username\Desktop</div>
                <div class="example-path" onclick="setDemoPath('D:\\Projects')">D:\Projects</div>
                <div class="example-path" onclick="setDemoPath('D:\\Projects\\MyApp')">D:\Projects\MyApp</div>
                <div class="example-path" onclick="setDemoPath('')">空路径 ($)</div>
            </div>
            
            <div class="input-group">
                <label>自定义路径:</label>
                <input type="text" id="custom-path" placeholder="输入自定义路径" value="C:\Users\Username\Documents">
                <button class="test-btn" onclick="setCustomPath()">设置路径</button>
            </div>
        </div>
        
        <div class="test-section">
            <h2>功能说明</h2>
            <div class="code-block">
<span class="highlight">// VSCode风格终端提示符</span>
// 1. 显示当前工作目录 + ">" 号
// 2. 如果没有工作目录，显示 "$" 号
// 3. 路径切换时自动更新提示符
// 4. 支持Windows路径格式

<span class="highlight">// 示例:</span>
C:\Users\Username\Documents> <span class="highlight">// 有工作目录</span>
$ <span class="highlight">// 无工作目录</span>

<span class="highlight">// 在Blue Code中的实现:</span>
function updateTerminalPrompt() {
  const inputPromptElement = document.querySelector('.terminal-input-line .terminal-prompt');
  if (inputPromptElement) {
    if (terminalWorkingDir) {
      inputPromptElement.textContent = `${terminalWorkingDir}> `;
    } else {
      inputPromptElement.textContent = '$ ';
    }
  }
}
            </div>
        </div>
        
        <div class="test-section">
            <h2>测试状态</h2>
            <div id="status" class="status info">
                准备就绪，点击上方按钮开始测试
            </div>
        </div>
    </div>

    <script>
        let currentPath = 'C:\\Users\\Username\\Documents';
        
        function updateDemoPrompt() {
            const promptElement = document.getElementById('demo-prompt');
            if (promptElement) {
                if (currentPath) {
                    promptElement.textContent = `${currentPath}> `;
                } else {
                    promptElement.textContent = '$ ';
                }
            }
            updateStatus('提示符已更新', 'success');
        }
        
        function resetDemoPrompt() {
            currentPath = 'C:\\Users\\Username\\Documents';
            updateDemoPrompt();
            updateStatus('提示符已重置', 'info');
        }
        
        function testCurrentPrompt() {
            const promptElement = document.getElementById('demo-prompt');
            if (promptElement) {
                const promptText = promptElement.textContent;
                updateStatus(`当前提示符: "${promptText}"`, 'info');
            } else {
                updateStatus('未找到提示符元素', 'error');
            }
        }
        
        function setDemoPath(path) {
            currentPath = path;
            updateDemoPrompt();
            updateStatus(`路径已设置为: ${path || '空路径'}`, 'success');
        }
        
        function setCustomPath() {
            const customPathInput = document.getElementById('custom-path');
            const path = customPathInput.value.trim();
            setDemoPath(path);
        }
        
        function updateStatus(message, type) {
            const statusElement = document.getElementById('status');
            if (statusElement) {
                statusElement.textContent = message;
                statusElement.className = `status ${type}`;
            }
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateDemoPrompt();
            updateStatus('演示已初始化', 'success');
            
            // 为演示输入框添加回车键处理
            const demoInput = document.getElementById('demo-input');
            if (demoInput) {
                demoInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        const command = this.value.trim();
                        if (command) {
                            updateStatus(`执行命令: ${command}`, 'info');
                            this.value = '';
                        }
                    }
                });
            }
        });
        
        // 全局测试函数
        window.testTerminalPromptDemo = function() {
            console.log('=== 终端提示符演示测试 ===');
            console.log('当前路径:', currentPath);
            console.log('提示符元素:', document.getElementById('demo-prompt'));
            console.log('提示符内容:', document.getElementById('demo-prompt')?.textContent);
            console.log('=== 测试完成 ===');
        };
    </script>
</body>
</html> 